<template>
  <div class="wrapper">
    <div class='top'>
      <van-icon class="setting" @click="setting" name="setting-o" />
      <div v-if="userState == 2">
        <h3>余额</h3>
        <p>￥{{ balance }}</p>
      </div>
      <div>
        <div class="img">
          <img :src="userInfo.headimgurl" preview alt="">
        </div>
        <p>{{ userInfo.nickname }}</p>
      </div>
      <div v-if="userState == 2">
        <h3>库存</h3>
        <p>{{ stock }}件</p>
      </div>
    </div>
    <router-link tag="div" to="/center/orderList/none" class="order">
      <MsgItem title="我的订单" value="查看"></MsgItem>
    </router-link>
    <div class="mid">
      <router-link tag="div" to="/center/orderList/1">
        <!-- <p>
          <img src="http://localhost:8181/uploads/201910171512053046.jpg" alt="">
        </p> -->
        <span>待付款</span>
        <span v-if="pay">({{ pay }})</span>
      </router-link>
      <router-link tag="div" to="/center/orderList/2">
        <!-- <p>
          <img src="http://localhost:8181/uploads/201910171512053046.jpg" alt="">
        </p> -->
        <span>待发货</span>
        <span v-if="hair">({{ hair }})</span>
      </router-link>
      <router-link tag="div" to="/center/orderList/6">
        <!-- <p>
          <img src="http://localhost:8181/uploads/201910171512053046.jpg" alt="">
        </p> -->
        <span>待收货</span>
        <span v-if="collect">({{ collect }})</span>
      </router-link>
      <router-link tag="div" to="/center/returnGoodsList">
        <!-- <p>
          <img src="http://localhost:8181/uploads/201910171512053046.jpg" alt="">
        </p> -->
        <span>退货</span>
        <span v-if="outgoods">({{ outgoods }})</span>
      </router-link>
      <!-- <router-link tag="div" to="/center/orderList/3">
        <p>
          <img src="http://localhost:8181/uploads/201910171512053046.jpg" alt="">
        </p>
        <span>退款</span>
        <span v-if="outpay">({{ outpay }})</span>
      </router-link> -->
    </div>
    <div class="bottom">
      <router-link tag="div" to="/center/merchantAdd" v-if="userState == 0">
        <MsgItem title="我是加盟商" value="查看"></MsgItem>
      </router-link>
      <template v-else>
        <router-link tag="div" to="/center/merchantCenter/merchantOrderList">
          <MsgItem title="被指派订单" value="查看"></MsgItem>
        </router-link>
        <router-link tag="div" to="/center/merchantCenter/merchantReturnList">
          <MsgItem title="退单列表" value="查看"></MsgItem>
        </router-link>
        <router-link tag="div" :to="'/center/bankList'">
          <MsgItem title="银行卡列表" value="查看"></MsgItem>
        </router-link>
      </template>
    </div>
  </div>
</template>

<script>
  import MsgItem from '@/components/msgItem/MsgItem.vue'
  import { addInt, removeInt } from '@/assets/js/axios.js'
  import { mapState } from 'vuex'
  export default {
    name: 'Center',
    components: {
      MsgItem
    },
    created() {
      removeInt()
      this.getUserInfo()
      if (this.userState == 2) {
        this._getBalance()
        this._getStock()
      }
    },
    data() {
      return {
        userInfo: {},
        collect: null, //待收货数量
        hair: null, //待发货数量
        pay: null ,//待付款数量
        outpay: null, //退款数量
        outgoods: null ,//退货数量
        balance: '',  //余额
        stock: '',  //库存
      }
    },
    computed: {
      ...mapState(['openId', 'userState'])
    },
    methods: {
      setting(){
        this.$router.push('/setting')
      },
      async getUserInfo() {
        let { data: { code, data } } = await this.$axios({
          url: '/v1/merchant/userinfo',
          method: 'GET',
          params: {
            openid: this.openId
          }
        })
        if(code === 0) {
          this.userInfo = data.userinfo
          this.collect = data.collect || ''
          this.hair = data.hair || ''
          this.pay = data.pay || ''
          this.outpay = data.outpay || ''
          this.outgoods = data.outgoods || ''
        }
        addInt()
        this.$toast.clear()
      },
      async _getBalance() {
        try{
          let { data: { code, data } } = await this.$axios({
            url: '/v1/platform/balance',
            method: 'GET',
            params: {
              openid: this.openId
            }
          })
          if (code === 0) {
            this.balance = data
          } else if(code === 1) {
            this.balance = 0
          }
          addInt()
          this.$toast.clear()
        }catch(e){
          this.$toast(e)
        }
      },
      async _getStock() {
        try{
          let { data: { code, data } } = await this.$axios({
            url: '/v1/platform/stock',
            method: 'GET',
            params: {
              openid: this.openId
            }
          })
          if (code === 0) {
            this.stock = data
          }
          if(code === 1) {
            this.stock = 0
          }
          addInt()
          this.$toast.clear()
        }catch(e){
          this.$toast(e)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .wrapper {
    /* padding: 0.2rem 0; */
    font-size: 0.28rem;
    background: #eee;
    height: 100vh;
  }
  .top {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0.8rem 0;
    color: #fff;
    background: $colorRed;
    & > div {
      flex: 1;
      .img {
        width: 1.5rem;
        height: 1.5rem;
        border: 2px solid #fff;
        border-radius: 50%;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      p {
        margin-top: 0.1rem;
      }
    }
    .setting{
      position: absolute;
      right: 0.5rem;
      top:0.4rem;
      font-size: 0.35rem;
    }
  }
  .order {
    margin-top: 0.2rem;
    padding: 0 0.1rem;
    background: #fff;
  }
  .mid {
    display: flex;
    align-items: center;
    background: #fff;
    margin-top: 0.2rem;
    padding: 0.2rem;
    font-size: 0.24rem;
    div {
      flex: 1;
      text-align: center;
      p {
        position: relative;
        height: 1rem;
        margin-bottom: 0.2rem;
        text-align: center;
        img {
          position: absolute;
          @include center;
          width: 1rem;
        }
      }
    }
  }
  
  .bottom {
    margin-top: 0.2rem;
    padding: 0 0.1rem;
    background: #fff;
    font-size: 0.28rem;
  }
</style>
